<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList" bgColor="#f8f8f8" :auto="false">
    <template #top>
      <uv-navbar placeholder title="地址管理" :autoBack="true" @leftClick="leftClick"></uv-navbar>
    </template>
    <view class="p-32">
      <uv-radio-group v-model="dataRef.radiovalue">
        <view class="aressList p-30 m-b-32" v-for="(item, index) in dataList" :key="index" @click="getSelect(item)">
          <view class="font-32">{{ item.province + item.city + item.district + item.detail }}</view>
          <view class="flex m-t-30 align-ali">
            <view class="font-36 font-weight-bold">{{ item.name }}</view>
            <view class="font-32 m-l-20 text-greey">{{ item.phone }}</view>
          </view>
          <view class="m-t-30 m-b-28">
            <uv-line color="#EFEFEF"></uv-line>
          </view>
          <view class="flex -align-ali">
            <view>
              <uv-radio shape="square" activeColor="#830102" label="默认地址" :name="item.id"
                @change="setDefaultAddress(item.id)"></uv-radio>
            </view>
            <view class="m-l-auto" @click.stop="editAddress(item)">
              <uv-image :src="ASSETSURL + 'address_01.png'" width="96rpx" height="41rpx"></uv-image>
            </view>
            <view class="m-l-38" @click.stop="deled(item)">
              <uv-image :src="ASSETSURL + 'address_02.png'" width="96rpx" height="41rpx"></uv-image>
            </view>
          </view>
        </view>
      </uv-radio-group>
    </view>
    <template #bottom>
      <view class="p-x-32 m-b-50">
        <dy-button width="100%" @click="getNewAddress">新建地址</dy-button>
      </view>
    </template>
  </z-paging>
</template>

<script setup>
import { getAddressList, addressDefaultSet, addressDel } from '@/api/api';
import { ref, onMounted, reactive } from 'vue';
import { useStore } from 'vuex';
import { onReachBottom, onShow, onReady, onLoad, onUnload } from '@dcloudio/uni-app';
import route from '@/uni_modules/uv-ui-tools/libs/util/route.js';
const select = ref(null); //选中地址  是否从选择地址跳转
const paging = ref(null);
const dataList = ref([]);
const dataRef = ref({
  radiovalue: null
});
onLoad((options) => {
  if (options.select) {
    select.value = options.select;
  }
})
onShow(() => {
  // console.log('onShow');
  // 解决onShow时数据不更新问题
  setTimeout(() => {
    paging.value.reload();
  }, 500);
})
//获取选中地址
const getSelect = (item) => {
  if (select.value) {
    // console.log(66666666, '获取选中地址');
    uni.navigateBack()
    uni.$emit('getAddress', item)
  }
}
const leftClick = () => {
  console.log(dataList.value);

  if (dataList.value.length == 0) {
    console.log(dataList.value, 22222222);
    uni.$emit('getAddress', {})
  }
}
onUnload(() => {
  console.log('离开页面,返回上一级');
  leftClick()
})
const queryList = (page, page_size) => {
  getAddressList({ page, page_size }).then(res => {
    paging.value.complete(res.data.data);
    const defaultAddress = res.data.data.find(item => item.is_default === 1);
    if (defaultAddress) {
      dataRef.value.radiovalue = defaultAddress.id;
    } else {
      dataRef.value.radiovalue = null;
    }
  });
};
//设置默认地址
const setDefaultAddress = (id) => {
  // uni.showModal({
  //   title: '默认地址设置成功',
  //   content: '确定设置默认地址吗？',
  //   success: function (res) {
  //     if (res.confirm) {
  //       console.log('用户点击确定');
  //     }
  //   }
  // });
  console.log(id, '设置默认地址22222');
  const address = dataList.value.find(item => item.id === id);
  if (address) {
    addressDefaultSet({ address_id: id }).then(res => {
      if (res.code === 1) {
        uni.showToast({
          icon: 'none',
          title: '默认地址设置成功'
        });
        // paging.value.reload();
      } else {
        uni.showToast({
          icon: 'none',
          title: res.msg
        });
      }
    });
  }
};
//编辑地址
const editAddress = (item) => {
  console.log(item, '---------');
  route('/pagesA/pages/address/newAddress', { address_id: item.id });
};
//删除地址
const deled = (item) => {
  uni.showModal({
    title: '提示',
    content: '确定删除该地址吗？',
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定');
        addressDel({ address_id: item.id }).then(res => {
          if (res.code === 1) {
            uni.showToast({
              icon: 'none',
              title: '删除成功'
            });
            paging.value.reload();
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            });
          }
        });
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  });
};

const getNewAddress = () => {
  route('/pagesA/pages/address/newAddress');
};
</script>

<style lang="scss">
.aressList {
  background: #fff;
  width: 100%;
  border-radius: 12rpx;
}
</style>
